<template>
  <div id="operationLog">
    <div class="pageHead">
      <el-form ref="operationLogForm" :model="operationLogForm" class="operationLogForm">
        <el-form-item>
          <el-input v-model="operationLogForm.keyWord" placeholder="操作关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="operationLogForm.operateType" placeholder="操作">
            <el-option label="全部" value=""></el-option>
            <!-- <el-option label="登录" value="登录"></el-option>
            <el-option label="添加" value="添加"></el-option>
            <el-option label="删除" value="删除"></el-option>
            <el-option label="修改" value="修改"></el-option>
            <el-option label="查看" value="查看"></el-option> -->
            <el-option v-for="item in operation" :key="item.typeId" :label="item.typeName" :value="item.typeId"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="operationLogForm.createId" :disabled="disableUserAction" filterable placeholder="用户">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in userList" :key="item.userid" :label="item.realName || item.userName" :value="item.userid"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 160px">
          <el-date-picker v-model="operationLogForm.operateTime" type="date" format="yyyy年MM月dd日" value-format="yyyy-MM-dd" placeholder="操作日期"> </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round size="medium" @click="GetData">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pageMain">
      <div class="tableContent">
        <el-table border :data="tableData" style="width: 100%" height="100%" v-loading="tableLoading" size="medium" class="pageInnerTable">
          <el-table-column prop="id" label="序号" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="code" label="类型" width="120" align="center"></el-table-column>
          <el-table-column prop="content" label="内容" min-width="150" align="center"></el-table-column>
          <el-table-column prop="username" label="用户" width="120" align="center"></el-table-column>
          <el-table-column prop="createtimestr" label="时间" width="160" align="center"></el-table-column>
          <el-table-column prop="ip" label="IP" align="center" width="160"></el-table-column>
        </el-table>
      </div>
      <el-pagination :small="true" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="operationLogForm.PageIndex" :page-sizes="[10, 20, 50]" :page-size="operationLogForm.PageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagingChild"></el-pagination>
      <!-- <pagination class="pagination" @getTableData="getTableData" :total="total" :listQuery="operationLogForm"></pagination> -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import pagination from '@/components/pagination'
export default {
  name: "operationLog",
  components: {
    // pagination
  },
  data() {
    return {
      disableUserAction: false, // 普通用户不能查看其他用户的操作日志
      operationLogForm: {
        PageIndex: 1, // 页码
        PageSize: 10, // 页数
        operateTime: "", // 操作时间
        createId: "", // 用户ID
        operateType: "", // 操作类型
        keyWord: "", // 操作关键字
      },
      tableLoading: false,
      operation: [],
      tableData: [],
      total: 0,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
      userList: (state) => state.common.userList,
    }),
  },
  methods: {
    handleSizeChange(val) {
      this.operationLogForm.PageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.operationLogForm.PageIndex = val;
      this.getTableData();
    },
    GetData() {
      this.operationLogForm.PageIndex = 1;
      this.getTableData();
    },
    GetOperationList() {
      // 操作类型
      this.$api.systemManagement.GetSelectOperationTypeList().then((res) => {
        let resData = res.data.data;
        this.operation = resData;
      });
    },
    getTableData() {
      this.tableLoading = true;
      let params = JSON.parse(JSON.stringify(this.operationLogForm));
      if (!params.operateType) {
        params.operateType = null;
      }
      if (params.createId) {
        const user = this.userList.find((m) => m.userid == params.createId);
        params.subid = user.subid;
      }
      this.$api.systemManagement.GetOperateLogPageList(params).then((res) => {
        let resData = res.data.data;
        if (res.data.status == 200) {
          this.tableData = resData.items;
          this.total = resData.totalCount;
        } else {
          this.tableData = [];
          this.total = 0;
        }
        this.tableLoading = false;
      });
    },
  },
  mounted() {
    this.getTableData();
    this.GetOperationList();
  },
};
</script>

<style lang="less">
#operationLog {
  .tableContent {
    padding: 0;
  }
  .pagingChild {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    .el-pagination__total {
      line-height: 28px;
    }
  }
  .operationLogForm {
    .el-form-item {
      float: left;
      width: 150px;
      margin-right: 15px;
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>
